<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
    <title>Drawing Resizable Shapes</title>
    <meta name="order" content="04" />
  </head>
  <body>
    <h2>Drawing Resizable Shapes - The <code>box</code> Property</h2>
    <p>In most of the cases, shapes are expected to be scalable. Pencil uses <code><a href="~/wiki/ref/Data_Types.html#dimension">Dimension</a></code> property
      type to set shape size through Box behaviour. Dimension property
      named <code>box</code> can be modified by the on-screen geometry editor. The box
      size changes will be applied to shape size.</p>
    <p>The example in this tutorial is a resizable rectangle base on a <code>$box</code> property.</p>
<pre name="code" class="xml"><![CDATA[
<Shape id="RoundedRect" displayName="Rectangle" icon="...">
  <Properties>
    <PropertyGroup>
      <Property name="box" type="Dimension">200,80</Property>
    </PropertyGroup>
    <PropertyGroup name="Background">
      <Property name="fillColor" displayName="Background Color"
                type="Color">#4388CCff</Property>
    </PropertyGroup>
    <PropertyGroup name="Border">
      <Property name="strokeColor" displayName="Line Color"
                type="Color">#1B3280ff</Property>
      <Property name="strokeStyle" displayName="Line Style"
                type="StrokeStyle">2|</Property>
    </PropertyGroup>
  </Properties>
  <Behaviors>
    <For ref="rrRect">
      <Box>$box</Box>
      <Fill>$fillColor</Fill>
      <StrokeColor>$strokeColor</StrokeColor>
      <StrokeStyle>$strokeStyle</StrokeStyle>
    </For>
  </Behaviors>
  <p:Content xmlns:p="http://www.evolus.vn/Namespace/Pencil"
             xmlns="http://www.w3.org/2000/svg">
    <rect id="rrRect" x="0" y="0" />
  </p:Content>
</Shape>
]]></pre>
    <p>The SVG rectangle has width and height attributes. The <code>Box</code> behavior will use
    the input Dimension value to change those width and height attributes. When the shape's property is changed when user
    doing scaling via the geometry editor, the behavior will reflect that change into the SVG element.</p>
    <h3>Add Rounded Corner</h3>
    <p>SVG rectangle may have rounded corners. Pencil also supports Radius
      behaviour to simplify this. In this example we add a <code><a href="~/wiki/ref/Data_Types.html#handle">Handle</a></code> property into the shape and 
      use its value in the <code><a href="~/wiki/ref/Behaviors.html#radius">Radius</a></code> behavior.</p>
<pre name="code" class="xml"><![CDATA[
<PropertyGroup name="Handles">
  <Property name="radius"
            displayName="Corner Radius"
            type="Handle"
            p:lockY="true" p:minX="0" p:maxX="$box.w / 2">0,0</Property>
</PropertyGroup>

<Behaviors>
  ...
  <Radius>
    <Arg>$radius.x</Arg>
    <Arg>$radius.x</Arg>
  </Radius>
  ...
</Behaviors>
]]></pre>
    
<p>In previous examples, <code><a href="~/wiki/ref/Data_Types.html#dimension">Dimension</a></code> property type is used for drawing resizable
      shapes via the <code>Box</code> behavior. However the <code>Box</code> behavior can be used only in
      case objects have width and height attributes. For other cases that we want to apply the <code><a href="~/wiki/ref/Data_Types.html#dimension">Dimension</a></code> value to
      an arbitrary attribute we can use the <code><a href="~/wiki/ref/Behaviors.html#attr">Attr</a></code> behavior. This approach can be used for all other cases, not limitted to property of type <code><a href="~/wiki/ref/Data_Types.html#dimension">Dimension</a></code>.</p>
<pre name="code" class="xml"><![CDATA[
<Shape id="ms-oval" displayName="Oval" icon="Icons/oval.png">
  <Properties>
    <PropertyGroup>
      <Property name="box" displayName="Box" type="Dimension">100,80</Property>
    </PropertyGroup>
    <PropertyGroup name="Background">
      <Property name="fillColor" displayName="Background Color"
                type="Color">#4388CCff</Property>
    </PropertyGroup>
    <PropertyGroup name="Border">
      <Property name="strokeColor" displayName="Line Color"
                type="Color">#1B3280ff</Property>
      <Property name="strokeStyle" displayName="Line Style"
                type="StrokeStyle">2|</Property>
    </PropertyGroup>
  </Properties>
  <Behaviors>
    <For ref="ellipse">
      <StrokeColor>$strokeColor</StrokeColor>
      <StrokeStyle>$strokeStyle</StrokeStyle>
      <Fill>$fillColor</Fill>
      <Attr>
        <Arg>"cx"</Arg>
        <Arg>$box.w / 2</Arg>
      </Attr>
      <Attr>
        <Arg>"cy"</Arg>
        <Arg>$box.h / 2</Arg>
      </Attr>
      <Attr>
        <Arg>"rx"</Arg>
        <Arg>$box.w / 2</Arg>
      </Attr>
      <Attr>
        <Arg>"ry"</Arg>
        <Arg>$box.h / 2</Arg>
      </Attr>
    </For>
  </Behaviors>
  <p:Content xmlns:p="http://www.evolus.vn/Namespace/Pencil"
             xmlns="http://www.w3.org/2000/svg">
    <ellipse id="ellipse" />
  </p:Content>
</Shape>
]]></pre>

    <p><code>&lt;Attr&gt;&lt;/Attr&gt;</code> behavior can be used for assigning all object
      properties value. In previous example, Attr behavior can also be used instead of
      <code>&lt;Box&gt;$box&lt;/Box&gt;</code> for rectangle:</p>
    
<pre name="code" class="xml"><![CDATA[
<Attr>
  <Arg>"width"</Arg>
  <Arg>$box.w</Arg>
</Attr>
<Attr>
  <Arg>"height"</Arg>
  <Arg>$box.h</Arg>
</Attr>
]]></pre>

  </body>
</html>
